<template>
	<view class="">
		<!-- 六个模块 -->
		<view class="six_box">
			<view class="six_s" v-for="(item,key) in six" :key="key" @click="gotoLunBo">
				<image :src="item.image" mode=""></image>
				<view class="text">{{item.title}}</view>
			</view>
		</view><!-- six_box六个模块 -->

		<!-- 为你推荐 -->
		<view class="recommend">为你推荐</view>
		<view class="menu_box">
			<view class="submenu" v-for="(item,sub) in submenu" :key="sub"  @click="go">
				<image :src="item.image" mode=""></image>
				<view class="text">{{item.title}}</view>
				<view class="texta">{{item.titleone}}</view>
			</view><!-- submenu -->
		</view><!-- menu_box -->



	</view><!--  -->
</template>

<script>
	export default {
		data() {
			return {
				six: [{
						image: "/static/images/hfps.png",
						title: '护肤用品'
					},
					{
						image: "/static/images/dunpai.png",
						title: '健康用品'
					},
					{
						image: "/static/images/safa.png",
						title: '家具生活'
					},
					{
						image: "/static/images/qiezi.png",
						title: '零食玩具'
					},
					{
						image: "/static/images/xiyiji.png",
						title: '家电厨具'
					},
					{
						image: "/static/images/qiandaisss.png",
						title: '珠宝首饰'
					}
				],
				submenu: [{
						image: "/static/images/nf.jpg",
						title: '新一代扫地机器人',
						titleone: '268积分'
					},
					{
						image: "/static/images/sg.jpg",
						title: '小U暖风机',
						titleone: '90积分'
					},
					{
						image: "/static/images/sg.jpg",
						title: '家具生活',
						titleone: 'aaa'
					},
					{
						image: "/static/images/sg.jpg",
						title: '零食玩具',
						titleone: 'aaa'
					},

				]
			}
		},
		onLoad() {

		},
		methods: {
			gotoLunBo() {
				//        
				uni.navigateTo({
					url: 'carttwo'
				})
			},
			go() {
							//        
							uni.navigateTo({
								url: 'cartthree'
							})
						}
		},
	}
</script>

<style lang="scss">
	.six_box {
		justify-content: space-between;
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		background: white;

		.six_s {
			justify-content: space-around;
			width: 33%;
			text-align: center;
			margin-top: 30rpx;

			image {
				width: 60rpx;
				height: 60rpx;
			}

			.text {
				padding: 20rpx 0;
			}
		}

	}

	.recommend {
		text-align: center;
		background-color: #F6F6F4;
		line-height: 80rpx;
		font-weight: 700;
		margin: 20rpx;
	}

	.menu_box {
		justify-content: space-around;
		display: flex;
		width: 95%;
		margin: 0 auto;
		flex-wrap: wrap;
		background: white;

		.submenu:nth-child(1) {
			box-shadow: 5rpx 5rpx 5rpx 5rpx #C9C9C9;
		}

		.submenu:nth-child(3) {
			box-shadow: 5rpx 5rpx 5rpx 5rpx #C9C9C9;
		}

		.submenu {
			justify-content: space-around;
			width: 45%;
			margin-top: 30rpx;
			border-radius: 15rpx;


			image {
				width: 100%;
				// margin:0 auto;

			}

			.text {
				padding: 10rpx 0;
				padding-left: 20rpx;
				font-weight: 600;
			}

			.texta {
				color: red;
				font-weight: 600;
				padding-left: 20rpx;
				padding-bottom: 20rpx;
			}
		}

	}
</style>
